<template>
  <div>
    <div v-if="goodslist.length == 0" class="empbox">
      <van-row type="flex" justify="center">
        <img src="../assets/14.jpg" />
      </van-row>
      <van-row type="flex" justify="center">
        <p class="emp">购物车空空如也</p>
      </van-row>
      <van-row type="flex" justify="center">
        <van-button type="info" size="mini" @click="getout">去逛逛</van-button>
      </van-row>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-swipe-cell v-for="item in goodslist" :key="item.id">
        <van-card
          :num="item.cou"
          :price="item.sell_price"
          :title="item.title"
          :thumb="item.thumb_path"
        >
          <div slot="footer">
            <van-stepper
              v-model="item.cou"
              @change="changeNum"
              @plus="add(item.id)"
              @minus="sub(item.id)"
            />
          </div>
        </van-card>
        <template slot="right">
          <van-button
            square
            type="danger"
            text="删除"
            @click="deletegood(item.id)"
          />
        </template>
      </van-swipe-cell>
    </van-pull-refresh>
    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodslist: [],
      total: 0,
      isLoading: false
    }
  },
  created() {
    this.getshopcarList()
  },
  watch: {
    goodslist: function(val) {
      this.total = 0
      val.forEach(item => {
        this.total += item.sell_price * item.cou
      })
      this.total = this.total * 100
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 500)
    },
    async getshopcarList() {
      const { data: res } = await this.$http.get(
        `/api/goods/getshopcarlist/${this.ids}`
      )
      if (res.status !== 0) {
        return this.$toast.fail('失败文案')
      }
      res.message.forEach(item => {
        this.$store.state.goodsIdArr.forEach(item1 => {
          if (item1.id == item.id) {
            item.cou += item1.count - 1
          }
        })
      })
      console.log(this.$store.state.goodsIdArr)
      this.goodslist = res.message
      console.log(this.goodslist)
      console.log(this.ids)
    },
    deletegood(id) {
      const index = this.goodslist.findIndex(item => item.id === id)
      this.goodslist.splice(index, 1)
      this.$store.commit('delCountById', id)
    },
    changeNum() {
      this.total = 0
      this.goodslist.forEach(item => {
        this.total += item.sell_price * item.cou
      })
      this.total = this.total * 100
    },
    onSubmit() {},
    getout() {
      this.$router.push('/goods/list')
    },
    add(id) {
      console.log(123, id)
      this.$store.commit('addCountById', id)
    },
    sub(id) {
      console.log(456, id)
      this.$store.commit('subCountById', id)
    }
  },
  computed: {
    ids() {
      let arr = []
      this.$store.state.goodsIdArr.forEach(item => {
        arr.push(item.id)
      })
      return arr.join(',')
    }
  }
}
</script>

<style lang="less" scoped>
.van-card {
  background-color: transparent !important;
}
.van-pull-refresh {
  padding: 50px 0 500px 0;
}
img {
  width: 100px;
}
.empbox {
  padding-top: 50px;
}
.emp {
  color: #ccc;
}
</style>
